<template>
  <el-container class='elheight'>
    <el-aside class='appTree'>
      <app-tree :tree-data="treeData"  v-on:appTreeClick="treeClickHandle"></app-tree>
    </el-aside>
    <el-main>
      <el-container>
        <el-header class="dzy-main-header">
          <div class="btn-group-el">
            <btn-group :currentSelectedData="currentSelectedData" @btnClickCallback="btnClickCallback"></btn-group>
          </div>
          <div class="dzy-custom-search-box">
            <div>
              日志分类：
              <el-select v-model="queryData.logCategory" clearable placeholder="请选择日志分类">
                <el-option v-for="item in dictData.logType" :key="item.valueCode" :label="item.valueName" :value="item.valueCode"></el-option>
              </el-select>
            </div>
            <div>日志编号：<el-input placeholder="请输入日志编号" v-model="queryData.logNumber" clearable class="dzy-custom-input"></el-input></div>
            <div>上报人：<el-input placeholder="请输入上报人" v-model="queryData.userName" clearable class="dzy-custom-input"></el-input></div>
            <div>上报人联系方式：<el-input placeholder="上报人联系方式" v-model="queryData.reportPhone" clearable class="dzy-custom-input"></el-input></div>
            <div>上报时间：
              <el-date-picker
                  v-model="queryData.reportTimeLeft"
                  type="datetime"
                  value-format="timestamp"
                  default-time="12:00:00"
                  :picker-options="dataPickerBeforeTodayOptions"
                  placeholder="选择上报时间">
              </el-date-picker>&nbsp;至
              <el-date-picker
                  v-model="queryData.reportTimeRight"
                  type="datetime"
                  value-format="timestamp"
                  default-time="12:00:00"
                  :picker-options="dataPickerBeforeTodayOptions"
                  placeholder="选择上报时间">
              </el-date-picker>
            </div>
            <div><el-button @click="searchHandleClick" type="primary" icon="el-icon-search">查询</el-button></div>
            <div><el-button @click="clearQuerData" type="primary" icon="el-icon-search">清除查询条件</el-button></div>
          </div>
        </el-header>
        <el-main>
          <app-table
            :page-data="pageData"
            :table-columns="tableColumns"
            v-on:currentChange="handleCurrentChange"
            v-on:handleCheckedRows="handleCheckedRows">
          </app-table>
        </el-main>
      </el-container>
    </el-main>
  </el-container>
</template>

<script>
import AppTree from '@/components/common/AppTree'
import AppTable from '@/components/AppTable'
import BtnGroup from '@/components/BtnGroup'
import AppUpload from '@/components/AppUpload'
import GridCascader from '@/components/GridCascader'
import {getLogCategory} from '@/data/DictData'
import {getUserDeptTree} from '@/utils/SessionDataUtil'
import {
  updateCheckFolkLog,
  findCheckFolkLog,
  updateRecommend
} from '@/http/WangGeGuanLiApi'
export default {
  data () {
    return {
      formData: {},
      treeData: [],
      pageData: {},
      queryData: {},
      currentSelectedData: [],
      dictData: {},
      dataPickerBeforeTodayOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now()
        }
      },
      tableColumns: [
        {prop: 'logNumber', label: '日志编号'},
        {prop: 'description', label: '事件描述'},
        {prop: 'checkStatus', label: '审核', formatter: this.formatterCheck},
        {prop: 'userName', label: '上报人'},
        {prop: 'reportPhone', label: '上报人联系方式'},
        {prop: 'reportTime', label: '上报时间', formatter: this.formatterTime}
      ]
    }
  },
  components: {
    AppTree,
    BtnGroup,
    AppTable,
    AppUpload,
    GridCascader
  },
  mounted () {
    this.getTableData()
    this.getTreeData()
    this.getDictData()
  },
  methods: {
    getTableData () {
      let param = this.queryData
      findCheckFolkLog(param).then(resp => {
        if (resp.code && resp.code === '200') {
          let data = resp.data
          if (data) {
            this.pageData = data
            if (this.pageData.items && this.pageData.items instanceof Array) {
              this.tableData = this.pageData.items
            }
          }
        }
      })
    },
    handleCurrentChange (data) {
      this.queryData = {}
      this.queryData.offset = (data - 1) * 10
      this.getTableData()
    },
    getTreeData () {
      // this.treeData = getUserGridTree()
      this.treeData = getUserDeptTree()
    },
    treeClickHandle (data) {
      this.queryData = {}
      this.queryData.deptId = data.id
      this.getTableData()
    },
    btnClickCallback (callbackData) {
      let rowData = callbackData.rows[0]
      if (!rowData) {
        this.$message({
          type: 'info',
          message: '请选择数据'
        })
        return
      }
      this.formData = callbackData.rows[0]
      // 审核通过
      if (callbackData.btnType === 'approve') {
        this.formData.checkStatus = 1
        updateCheckFolkLog(this.formData).then(resp => {
          if (resp.code && resp.code === '200') {
            this.$message({
              type: 'success',
              message: '审核通过'
            })
            this.getTableData()
          }
        })
        // 审核不通过
      } else if (callbackData.btnType === 'not_approve') {
        this.formData.checkStatus = 0
        updateCheckFolkLog(this.formData).then(resp => {
          if (resp.code && resp.code === '200') {
            this.$message({
              type: 'success',
              message: '审核不通过'
            })
            this.getTableData()
          }
        })
        // 社区村推荐
      } else if (callbackData.btnType === 'recommend') {
        this.formData.recommendedStatus = 1
        updateRecommend(this.formData).then(resp => {
          if (resp.code && resp.code === '200') {
            this.$message({
              type: 'success',
              message: '已设为社区村推荐'
            })
            this.getTableData()
          }
        })
        // 不推荐
      } else if (callbackData.btnType === 'not_recommend') {
        this.formData.recommendedStatus = 0
        updateRecommend(this.formData).then(resp => {
          if (resp.code && resp.code === '200') {
            this.$message({
              type: 'success',
              message: '已设为不推荐'
            })
            this.getTableData()
          }
        })
        // 乡镇推荐
      } else if (callbackData.btnType === 'town_recommend') {
        this.formData.recommendedStatus = 2
        updateRecommend(this.formData).then(resp => {
          if (resp.code && resp.code === '200') {
            this.$message({
              type: 'success',
              message: '已设为乡镇推荐'
            })
            this.getTableData()
          }
        })
      }
    },
    handleCheckedRows (rows) {
      if (rows && rows instanceof Array && rows.length > 0) {
        this.currentSelectedData = rows
      } else {
        this.currentSelectedData = []
      }
    },
    // 检索按钮操作
    searchHandleClick () {
      this.queryData.offset = 0
      this.getTableData()
    },
    formatterTime (row, column) {
      if (row && row.reportTime) {
        let time = row.reportTime
        return this.$moment(time).format('YYYY-MM-DD HH:mm:ss')
      }
    },
    formatterCheck (row, column) {
      if (row) {
        if (row.checkStatus) {
          return '通过'
        } else if (row.checkStatus === 0) {
          return '不通过'
        } else {
          return '未审核'
        }
      }
    },
    clearQuerData () {
      this.queryData = {}
    },
    getDictData () {
      this.dictData.logType = getLogCategory()
    }
  }
}
</script>
<style scoped>
 .dzy-custom-search-box>div {
   margin-right: 10px
 }
</style>
